@layout("/common/_vue_container.html"){
<div id="app" v-cloak v-loading="fullscreenLoading" style="height:100%;">
    <div class="main_content">
        <div v-loading="screenLoading">
            <div class="remind_title2">
                用户列表
                <el-button
                        type="primary"
                        size="small"
                        class="product-new-button"
                        v-on:click="outputExcel"
                >
                    导出excel
                </el-button>
            </div>
            <el-form :inline="true" :model="queryContent" class="product-form-inline" size="mini">
                <el-form-item label="关键词" size="mini">
                    <el-input v-model="queryContent.keyword" placeholder="手机号/昵称/真实名" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="注册日期" size="mini">
                    <div class="" class="product-form-item">
                        <el-date-picker
                                size="mini"
                                v-model="queryContent.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item size="mini">
                    <el-button type="primary" v-on:click="loadUserList" size="mini">查询</el-button>
                    <el-button v-on:click="resetQuery" size="mini">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="singleTable" :data="userData" style="width: 100%">
                <el-table-column type="index" width="60" property="index">
                </el-table-column>
                <el-table-column property="id" label="id"></el-table-column>
                <el-table-column property="phone" label="手机号">
                </el-table-column>
                <el-table-column property="nickName" label="昵称" sortable>
                </el-table-column>
                <el-table-column property="realName" label="真实姓名" sortable>
                </el-table-column>
                <el-table-column property="regFrom" label="注册来源" sortable>
                </el-table-column>
                <el-table-column property="createTime" label="注册时间">
                </el-table-column>
                <el-table-column label="操作" width="250">
                    <template scope="scope">
                        <el-button size="small"
                                   v-on:click=deleteUser(scope.row.id)>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template>
                <el-pagination
                        background
                        v-on:size-change="handleSizeChange"
                        v-on:current-change="handleCurrentChange"
                        :current-page.sync="pageNo"
                        :page-sizes="[20, 50, 100, 200]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </div>
        <el-dialog title="确认删除" :visible.sync="dialogDeleteVisible">
            <div class="user-status-dialog-text">
                确定删除该用户？
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogDeleteVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="confirmDelete()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script src="${ctxPath}/static/modular/cash/user/user_list.js"></script>
@}

